<template>
  <div>
    <div v-loading="loading">
      <h1 style="margin: 20px; font-size: 30px">
        <img
          src="@/static/img/video.svg"
          style="width: 40px; position: relative; top: 8px; left: 5px; margin-right: 10px"
        />
        {{ tableData.name }}
      </h1>
      <video :src="tableData.mvUrl" id="video" controls></video>
      <h2 style="margin: 20px">
        作者：
        <span v-for="i in tableData.artists" class="artistName">
          {{ i.name + "     " }}
        </span>
      </h2>
      <br />
      <h4 style="display: block; padding: 0 20px">{{ tableData.publishTime }}</h4>
      <br />
      <h3 style="display: block; padding: 20px; color: grey">{{ tableData.desc }}</h3>
    </div>

    <div class="commentDiv" v-show="commentData[0]">
      <div v-for="item in commentData" class="minDiv">
        <div class="card-header">
          <img :src="item.avatarUrl" alt="" class="avatar" />
          <span>
            <p>{{ item.nickname }}</p>
          </span>
        </div>

        <p style="margin: 15px 0 5px 15px">{{ item.content }}</p>
        <div class="card-footer">
          <p style="margin-left: 15px">{{ item.timeStr }}</p>
          <p>
            <el-icon class="pointLike"><Pointer /></el-icon> {{ item.likedCount }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { storeToRefs } from "pinia";
import { storage } from "@/stores/storage";
import { getMVDetails, getMVUrl } from "@/service/songs.js";
import { mvComment } from "@/service/video.js";
import { getArtistNames } from "@/utils/practicalFun";
export default defineComponent({
  setup() {
    let store = storage();
    const { mvId } = storeToRefs(store);
    let tableData = ref({});
    const loading = ref(true);
    let commentData = ref([]);

    getMVDetails(mvId.value)
      .then((res) => {
        let data = res.data.data;
        tableData.value.name = data.name;
        tableData.value.desc = data.desc;
        tableData.value.publishTime = data.publishTime;
        tableData.value.artists = getArtistNames(data.artists);
        tableData.value.id = data.id;
        getMVUrl(tableData.value.id)
          .then((res) => {
            tableData.value.mvUrl = res.data.data.url;
          })
          .catch((err) => {
            if (err) {
              ElMessage("视频获取失败");
            }
          });
        loading.value = false;
      })
      .catch((err) => {
        if (err) ElMessage("视频获取失败");
      });

    mvComment(mvId.value)
      .then((res) => {
        let data;
        if (res.data.hotComments) data = res.data.hotComments;
        else if (res.data.hotComments.length === 0) {
          data = res.data.comments;
        }
        if (data.length !== 0) {
          for (let i = 0; i < data.length; i++) {
            commentData.value[i] = {};
            commentData.value[i].content = data[i].content;
            commentData.value[i].timeStr = data[i].timeStr;
            commentData.value[i].userId = data[i].user.userId;
            commentData.value[i].avatarUrl = data[i].user.avatarUrl;
            commentData.value[i].nickname = data[i].user.nickname;
            commentData.value[i].commentId = data[i].commentId;
            commentData.value[i].likedCount = data[i].likedCount;
          }
        } else {
        }
      })
      .catch((err) => {
        if (err) ElMessage("评论获取失败");
      });
    return {
      tableData,
      commentData,
      loading,
    };
  },
});
</script>

<style scoped>
#video {
  width: 700px;
  margin: 0px 150px;
}
.commentDiv {
  background-color: white;
  width: 90%;
  height: 500px;
  padding: 0 3%;
  overflow: scroll;
  scrollbar-width: none;
}
.header {
  font-size: large;
}
.minDiv {
  background-color: white;
  width: 100%;

  padding: 10px;
  margin: 5px 10px;
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 0 10px;
}
.card-header {
  display: flex;
  justify-content: start;
  align-items: center;
}
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pointLike {
  font-size: 20px;
  position: relative;
  top: 5px;
}
.artistName {
  white-space: pre;
}
</style>
